<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"  %>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="main1style.css">
<script type="text/javascript" src="js/sketch.min.js"></script>
	
	






   <style>
   
     #right{
         position: absolute;
      
         top: 8%;
         left: 30%; 	 
    	}
    	
    	#if{
    		width:700px;
    		height:600px;
    	 
    	}
    	
    	 #right1{
         position: absolute;
      
         top: 1%;
         left: 13%; 	 
    	}
    	
    		#if1{
    		width:320px;
    		height:600px;
    	 
    	}
    	
    		

    </style>
    
    
    

</head>

<body >

   
<div id="right">
    		<iframe  frameborder="no"  id="if" name="frame"  src="子框架1.html" ></iframe>
    		
    	</div>
    	
    	
    	
    	<div id="right1">
    		<iframe   id= "if1" frameborder="no"  name="frame1"   ></iframe>
    		<div id="test" style=" position:fixed;top:330px;z-index:20;"></div>
    	</div>


<div class="left-menu">

  <div class="logo"><i class="fa fa-align-justify"></i>
    <div>爱心宠物诊所</div>
    
  </div>
  
  <div class="accordion">
  
    <div class="section">
      <input type="radio" name="accordion-1" id="section-1" checked="checked"/>
      <label for="section-1"><span>宠物</span></label>
      <div class="content">
        <ul>
          <li><i class="fa fa-inbox"></i><a href="OperatorServlet?op=select" target="frame"> <span>宠物信息</span></a></li>
          <li><i class="fa fa-share"></i><a href="增加宠物.jsp"target="frame"><span>增加宠物    </span></a></li>
           <li><i class="fa fa-share"></i><a href="查找宠物.jsp"target="frame"><span>查找宠物    </span></a></li>
          <li><i class="fa fa-archive"></i><span><a href="浏览历史记录.jsp" target="frame">浏览历史记录</span></a></li>
        </ul>
      </div>
    </div>
    
    <div class="section">
      <input type="radio" name="accordion-1" id="section-2" value="toggle"/>
      <label for="section-2"><span>客户</span></label>
      <div class="content">
        <ul>
          <li><i class="fa fa-cog"></i><a href="MasterServlet?op=select" target="frame"><span>客户信息</span></a></li>
          <li><i class="fa fa-sitemap"></i><a href="增加客户.jsp"target="frame"><span>增加客户</span></a></li>
        </ul>
      </div>
    </div>
    
    
      <div class="section">
      <input type="radio" name="accordion-1" id="section-3" value="toggle"/>
      <label for="section-3"><span>兽医</span></label>
      <div class="content">
        <ul>
          <li><i class="fa fa-cog" ></i><a href="VetServlet?op=select" target="frame"> <span>兽医信息</span></a></li>
          <li><i class="fa fa-group"></i><a href="DesServlet?op=select" target="frame"><span>阅览病例    </span></a></li>
          <li><i class="fa fa-sitemap"></i><a href="增加新病例.jsp" target="frame"><span>增加新病例</span></a></li>
        </ul>
      </div>
    </div>
    

    <div class="section">
      <input type="radio" name="accordion-1" id="section-4" value="toggle"/>
      <label for="section-4"><a href="contus.jsp"  target="frame"=><span>关于我们</span></a></label>
      <div class="content"></div>
    </div>
    
    <div class="section">
      <input type="radio" name="accordion-1" id="section-5" value="toggle"/>
      <label for="section-5"><a href="结束页面.html" > <span>退出系统</span></a></label>
      <div class="content"></div>
    </div>
  </div>
</div>

<script>
		// ----------------------------------------
		// Particle
		// ----------------------------------------


		function Particle(x, y, radius) {
			this.init(x, y, radius);
		}

		Particle.prototype = {

			init : function(x, y, radius) {

				this.alive = true;

				this.radius = radius || 10;
				this.wander = 0.15;
				this.theta = random(TWO_PI);
				this.drag = 0.92;
				this.color = '#fff';

				this.x = x || 0.0;
				this.y = y || 0.0;

				this.vx = 0.0;
				this.vy = 0.0;
			},

			move : function() {

				this.x += this.vx;
				this.y += this.vy;

				this.vx *= this.drag;
				this.vy *= this.drag;

				this.theta += random(-0.5, 0.5) * this.wander;
				this.vx += sin(this.theta) * 0.1;
				this.vy += cos(this.theta) * 0.1;

				this.radius *= 0.96;
				this.alive = this.radius > 0.5;
			},

			draw : function(ctx) {

				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		};

		// ----------------------------------------
		// Example
		// ----------------------------------------

		var MAX_PARTICLES = 280;
		var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900',
				'#FF4E50', '#F9D423' ];

		var particles = [];
		var pool = [];

		var demo = Sketch.create({
			container : document.getElementById('test')
		});

		demo.setup = function() {

			// Set off some initial particles.
			var i, x, y;

			//  for ( i = 0; i < 20; i++ ) {
			x = (demo.width * 0.5) + random(-100, 100);
			y = (demo.height * 0.5) + random(-100, 100);
			demo.spawn(0, 999);
			// }
		};

		demo.spawn = function(x, y) {

			if (particles.length >= MAX_PARTICLES)
				pool.push(particles.shift());

			particle = pool.length ? pool.pop() : new Particle();
			particle.init(x, y, random(5, 40));

			particle.wander = random(0.5, 2.0);
			particle.color = random(COLOURS);
			particle.drag = random(0.9, 0.99);

			theta = random(TWO_PI);
			force = random(2, 8);

			particle.vx = sin(theta) * force;
			particle.vy = cos(theta) * force;

			particles.push(particle);
		};

		demo.update = function() {

			var i, particle;

			for (i = particles.length - 1; i >= 0; i--) {

				particle = particles[i];

				if (particle.alive)
					particle.move();
				else
					pool.push(particles.splice(i, 1)[0]);
			}
		};

		demo.draw = function() {

			demo.globalCompositeOperation = 'lighter';

			for ( var i = particles.length - 1; i >= 0; i--) {
				particles[i].draw(demo);
			}
		};

		demo.mousemove = function() {

			var particle, theta, force, touch, max, i, j, n;

			for (i = 0, n = demo.touches.length; i < n; i++) {

				touch = demo.touches[i], max = random(1, 4);
				for (j = 0; j < max; j++) {
					demo.spawn(touch.x, touch.y);
				}

			}
		};
	</script>


	

</body>

</html>




